<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>纯css红绿灯</title>
	<style type="text/css" media="screen">
		/* 维持形状的基本样式 */
		.trafficlight {
			border: 1px solid #ccc;
	    width: 100px;
	    padding: 20px;
	    margin: 0 auto;
		}
		
		.trafficlight>div {
			width: 100px;
		  height: 100px;
		  border-radius: 50%;
		}
		.red {
			background: red;
			animation: 13s red infinite;
		}
		.yellow {
			background: yellow;
			animation: 13s yellow infinite;
		}
		.green {
			background: green;
			animation: 13s green infinite;
		}
		

		/* 作用于红灯的动画 */
		@keyframes red{
		  0%{opacity: 1;}
		  20%{opacity: 1;}
		  40%{opacity: 1;}
		  60%{opacity: .1;}
		  80%{opacity: .1;}
		  100%{opacity: .1;}
		}

		/* 作用于黄灯的动画 */
		@keyframes yellow{
		  0%{opacity: .1;}
		  20%{opacity: .1;}
		  40%{opacity: 1;}
		  50%{opacity: .1;}
		  60%{opacity: .1;}
		  80%{opacity: .1;}
		  100%{opacity: .1;}
		}

		/* 作用于绿灯的动画 */
		@keyframes green{
		  0%{opacity: .1;}
		  20%{opacity: .1;}
		  40%{opacity: .1;}
		  60%{opacity: 1;}
		  80%{opacity: 1;}
		  85%{opacity: .1;}
		  90%{opacity: 1;}
		  95%{opacity: .1;}
		  100%{opacity: 1;}
		}
	</style>
</head>
<body>
	<div class="trafficlight">
		<div class="red"></div>
		<div class="yellow"></div>
		<div class="green"></div>
	</div>
</body>
</html>